<template>
    <div class="container">
        <div class="content flex">
            <div class="left back-fff">
                <div class="title li">User Center</div>
                <router-link :to="{ path: item.path }" v-for="(item, index) in userMeun" :key="index">
                    <template v-if="item.name == 'user/leavingMmessage'">
                        <div v-if="messageOnOrOff" class="li" :class="{ 'active': getActive(item) }">
                            {{ item.meta.title }}
                        </div>
                    </template>
                    <div v-else class="li" :class="{ 'active': getActive(item) }">
                        {{ item.meta.title }}
                    </div>
                </router-link>
                <div class="li customLi" :class="{ 'active': false }" style="cursor: pointer;"
                    onclick="javascript:window.open('https://www.uwcchina.org/en/Admissions/single/38','_blank')">
                    Eligibility Criteria</div>
            </div>
            <div class="right flex1">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
import userMeun from "@/router/views/userMeun";

import api from "@/network/api";
import to from "await-to-js";
import { checkResponse } from "@/network/vertify";

const { CreateMessageOnOrOff } = api;

const CreateMessageOnOrOffAsync = async () => {
    const [err, response] = await to(CreateMessageOnOrOff({}));
    var [state, data] = checkResponse(err, response);
    if (!state) return false;
    return data == 1;
};


export default {
    data() {
        return {
            userMeun: userMeun,
            messageOnOrOff: false,
        };
    },
    async mounted() {
        this.messageOnOrOff = await CreateMessageOnOrOffAsync();
    },
    methods: {
        getActive(item) {
            return [this.$route.meta.path, this.$route.path].includes(item.path);
        }
    }
};
</script>
<style scoped lang="scss">
.content {
    margin: 20px auto;

    .left {
        width: 210px;
        min-height: 760px;

        .title {
            font-weight: bold;
        }

        .li {
            height: 50px;
            line-height: 50px;
            padding-left: 21px;
            font-size: 16px;
            border-top: 1px solid #f2f2f2;
            position: relative;
        }

        .customLi {
            &:hover {
                color: #2D9EF3;
            }
        }

        .active {
            background-color: #2d9ef3;
            color: #fff;

            &::before {
                content: " ";
                position: absolute;
                right: 0;
                top: 13px;
                width: 0;
                height: 0;
                border-top: 12px solid transparent;
                border-right: 12px solid #f2f2f2;
                border-bottom: 12px solid transparent;
            }
        }
    }

    .right {
        margin-left: 20px;
    }
}
</style>